<template>
	<view class="flex-col page">
		<view class="flex-col flex-1 group">
			<view class="flex-col">
				<view class="flex-col ">
					<view class="flex-col items-start section_4" @click="toHead(0)">
						<text class="font_2 text_5">封面图</text>
						<image :src="data.cover_url" class=" section_5 mt-23" mode="" v-if="data.cover_url!=''"></image>
						<image src="/static/update.png" class=" section_5 mt-23" mode="" v-else></image>
					</view>
					<view class="flex-row justify-between section_6">
						<text class="font_2">标题</text>
						<input type="text" class="font_3" placeholder="请填写" required
							v-model="data.content.service_name" />
					</view>
					<view class="flex-row justify-between section_6">
						<text class="font_2">时长(分钟)</text>
						<input type="text" class="font_3" placeholder="请填写" required v-model="data.content.term" />
					</view>
					<view class="flex-row justify-between section_6">
						<text class="font_2">价格</text>
						<view class="flex-row">
							<!-- <text>￥</text> -->
							<input type="text" class="font_3" placeholder="请填写" required v-model="data.content.price" />
						</view>
					</view>
					<view class="flex-row justify-between section_6">
						<text class="font_2">门市价</text>
						<view class="flex-row">
							<!-- <text>￥</text> -->
							<input type="text" class="font_3" placeholder="请填写" required
								v-model="data.content.market_price" />
						</view>
					</view>
					<view class="flex-col items-start section_4" style="padding-bottom: 0;">
						<view class="flex-row items-center justify-between" style="width: 100%;margin-bottom: 10rpx;">
							<text class="font_2 text_5">详情</text>
							<text class=" text5" @click="toAdd">添加</text>
						</view>
						<view class="flex-col relative" v-for="(item,index) in data.intro" :key="index"
							style="width: 100%;">
							<view class="flex-row items-center section6" style="padding-bottom: 10rpx;">
								<text class="font_2">服务标题</text>
								<input type="text" class="font_3" style="text-align: left;margin-left: 30rpx;"
									placeholder="请填写" v-model="item.intro_title" />
							</view>
							<view class="flex-row items-center section6" style="padding-top: 10rpx;">
								<text class="font_2">服务内容</text>
								<input type="text" class="font_3" style="text-align: left;margin-left: 30rpx;"
									placeholder="请填写" v-model="item.intro_detail" />
							</view>
							<image src="/static/del.png" class="del" mode="" @click="toDel(index)"></image>
						</view>
					</view>
					<!-- <view class="flex-row justify-between section_6">
						<text class="font_2">佣金</text>
						<input type="text" class="font_3" placeholder="请填写" v-model="data.content.brokerage" />
					</view> -->
					<!-- <view class="flex-row justify-between section_6">
						<text class="font_2">销量</text>
						<input type="text" class="font_3" placeholder="请填写" v-model="data.content.sales" />
					</view> -->
					<view class="flex-row justify-between section_7" @click="data.show=true">
						<text class="font_2">服务分类</text>
						<view class="flex-row items-center">
							<text class="text_7">{{data.content.category}}</text>
							<image class="ml-12 shrink-0 image_7" src="/static/more1.png" />
						</view>
					</view>
					<view class="flex-col items-start section_4" @click="toHead(1)">
						<text class="font_2 text_5">详情</text>
						<image :src="data.detail_url" class=" section_5 mt-23" mode="" v-if="data.detail_url!=''">
						</image>
						<image src="/static/update.png" class=" section_5 mt-23" mode="" v-else></image>
					</view>
					<view class="flex-col items-start section_4" @click="toHead(2)">
						<text class="font_2 text_5">购买须知</text>
						<image :src="data.buy_detail_url" class=" section_5 mt-23" mode=""
							v-if="data.buy_detail_url!=''"></image>
						<image src="/static/update.png" class=" section_5 mt-23" mode="" v-else></image>
					</view>

					<view class="flex-row justify-between section_6">
						<textarea class="font3" :cursor-spacing="100" style="min-height: 200rpx;" :auto-height="true"
							placeholder="请填写文字介绍" v-model="data.content.content" cols="30" rows="10"></textarea>
					</view>
				</view>
			</view>
			<view class="flex-col group_4 mt-44-5">
				<view class="flex-col justify-start items-center button" @click="toConf">
					<text class="text_14">提交</text>
				</view>
			</view>
		</view>
	</view>
	<u-popup :show="data.show" :round="10" :closeable="true" mode="bottom" @close="data.show=false">
		<div class="title">请选择分类</div>
		<view class="popup">
			<view class="popup-item" @click="data.service=index" v-for="(item,index) in data.serviceList" :key="index">
				<view class="popup-item-num">{{item.name}}</view>
				<view class="popup-item-click">
					<image src="/static/click_ac.png" v-if="data.service==index" mode=""></image>
					<image src="/static/click.png" v-else mode=""></image>
				</view>
			</view>
		</view>
		<view class="btn" @click="toCause">确定</view>
	</u-popup>
</template>

<script setup>
	import {
		onShow,
		onLoad
	} from "@dcloudio/uni-app";
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance,
		onBeforeUnmount
	} from "vue"
	import amapFile from '../../utils/amap-uni.130.js'
	const myAmapFun = new amapFile.AMapWX({
		// key: '3a26f7397fc12384590ae0a8ab25443b',
		key: '58961ba8cdec813ca3f723c95079f9d2'
	});
	const {
		proxy
	} = getCurrentInstance()

	let data = ref({
		show: false,
		loading: false,
		content: {
			type: 3,
			category_id: '',
			cover: "",
			// cover_url: '',
			category: '',
			term: '',
			price: '',
			market_price: '',
			detail: '',
			// detail_url: '',
			buy_detail: '',
			// buy_detail_url: '',
			sales: '',
			content: '',
			shop_id: uni.getStorageSync('shop_id') || ''
		},
		detail_url: '',
		buy_detail_url: '',
		cover_url: '',
		intro: [{
			intro_title: '',
			intro_detail: ''
		}],
		service_id: '',
		index: '',
		serviceList: [],
		service: -1,
	})
	onLoad((option) => {
		// data.value.service_id=option.service_id
		// data.value.index=option.index
		// getDate()
		getService()
		uni.$on('photo', function(res) {
			console.log(res, "photo");
			data.value.content.idcard_front = res.idcard_front
			data.value.content.idcard_front_url = res.idcard_front_url
			data.value.content.idcard_back = res.idcard_back
			data.value.content.idcard_back_url = res.idcard_back_url
			data.value.content.idcard_hand = res.idcard_hand
			data.value.content.idcard_hand_url = res.idcard_hand_url
		})
	})
	onBeforeUnmount(() => {
		uni.$off('photo')
	})
	onShow(() => {

	})
	const getDate = () => {
		proxy.$req.requestPOST(proxy.$api.CenterInfo.serviceDetail, {
			service_id: data.value.service_id,
		}).then(res => {
			if (res.flag == "success") {
				data.value.content = res.data
				data.value.detail_url = res.data.detail
				data.value.buy_detail_url = res.data.buy_detail
				data.value.cover_url = res.data.cover
				data.value.intro = res.data.intro
				if (!data.value.content.type) {
					data.value.content['type'] = 3
				}
				data.value.service = data.value.serviceList.findIndex(ele => ele.id == res.data.category_id)
				console.log(data.value, "获取用户资料");
			} else {
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			}
		})
	}
	const getService = () => {
		proxy.$req.requestPOST(proxy.$api.CenterInfo.getServiceCategory).then(res => {
			if (res.flag == "success") {
				data.value.serviceList = res.data.list
			} else {
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
			}
		})
	}
	const picker1 = (e) => {
		data.value.index = e.detail.value
		data.value.content.gender = e.detail.value + 1
	}
	const picker2 = (e) => {
		console.log(e);
		data.value.content.birthday = e.detail.value
	}
	const toUrl = () => {
		uni.navigateTo({
			url: '/pages/Photo/Photo'
		})
	}
	const toDel = (index) => {
		data.value.intro.splice(index, 1)
	}
	const toAdd = () => {
		data.value.intro.push({
			intro_title: '',
			intro_detail: ''
		})
	}
	const selectAddress = (e) => {
		// let that = this
		uni.chooseLocation({
			success: function(res) {
				console.log(res, 10)
				let name = res.name
				// that.formatted=res.address
				data.value.content.address = name
				data.value.content.lng = res.longitude
				data.value.content.lat = res.latitude
				let locat = [res.longitude, res.latitude]
				let location = locat.join(',')
				myAmapFun.getRegeo({
					location: location,
					success: function(res) {
						console.log(res, "回调成功")
						// that.map = false
						data.value.content.district_id = res[0].regeocodeData.addressComponent
							.adcode
						data.value.formatted = res[0].regeocodeData.addressComponent.province +
							'' + res[0].regeocodeData.addressComponent.city + '' + res[0]
							.regeocodeData.addressComponent.district
						// console.log(that.formatted,"province")
					},
					fail: function(info) {
						console.log(info, "回调失败")
					}
				})
			},
			fail: (err) => {
				console.log(err);
			}
		})
	}
	const toCause = () => {
		data.value.content.category = data.value.serviceList[data.value.service].name
		data.value.content.category_id = data.value.serviceList[data.value.service].id
		data.value.show = false
	}
	const toHead = (type) => {
		uni.chooseImage({
			count: 1, //默认9
			success: function(res) {
				console.log(res.tempFilePaths);
				proxy.$req.upload(proxy.$api.SystemInfo.upload, res.tempFilePaths[0], 1).then((res) => {
					console.log(res, "上传");
					if (res.flag == "success") {
						if (type == 0) {
							data.value.cover_url = res.data.list[0].abs_url
							data.value.content.cover = res.data.list[0].abs_url
							data.value.content.cover_url = res.data.list[0].abs_url
						} else if (type == 1) {
							data.value.detail_url = res.data.list[0].abs_url
							data.value.content.detail = res.data.list[0].abs_url
							data.value.content.detail_url = res.data.list[0].abs_url
						} else if (type == 2) {
							data.value.buy_detail_url = res.data.list[0].abs_url
							data.value.content.buy_detail = res.data.list[0].abs_url
							data.value.content.buy_detail_url = res.data.list[0].abs_url
						}

					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
					// let imgData = JSON.parse(res.data.replace('\uFEFF', ''))

				})
			}
		})
	}

	const toYongHu = () => {
		uni.navigateTo({
			url: '/pages/yonghuxieyi/yonghuxieyi?type=3'
		})
	}
	const toConf = () => {
		if (!data.value.loading) {
			if (data.value.cover_url == '' || data.value.content.service_name == '' || data.value.content.term == '' ||
				data.value.content.price == '' || data.value.content.market_price == '') {
				uni.hideLoading()
				uni.showToast({
					title: '请检查输入信息',
					icon: 'none'
				})
				return
			}
			data.value.loading = true
			data.value.content.intro = JSON.stringify(data.value.intro)
			proxy.$req.requestPOST(proxy.$api.CenterInfo.shopServiceEdit, data.value.content).then(res => {
				console.log(res, "修改资料");
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
				if (res.flag == "success") {
					setTimeout(() => {
						uni.navigateBack()

					}, 1000)
				}
				uni.hideLoading()
			})
		}
	}
	const timestampToTime = () => {
		let date = new Date().getDate();
		let Y = date.getFullYear() + '-';
		let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
		let D = date.getDate() + ' ';
		let h = date.getHours() + ':';
		let m = date.getMinutes();
		let s = date.getSeconds();
		return Y + M + D;
	}
</script>

<style scoped lang="scss">
	.ml-8-5 {
		margin-left: 17rpx;
	}

	.ml-12 {
		margin-left: 12rpx;
	}

	.ml-10 {
		margin-left: 10rpx;
	}

	.mt-13-5 {
		margin-top: 27rpx;
	}

	.mt-23 {
		margin-top: 46rpx;
	}

	.mt-6-5 {
		margin-top: 13rpx;
	}

	.mt-19-5 {
		margin-top: 39rpx;
	}

	.mt-44-5 {
		margin-top: 89rpx;
	}

	.page {
		background-color: #f8f8f8;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.text-wrapper {
			padding: 28rpx 0;
			background-color: #ffe6e5;

			.font_2 {
				font-size: 28rpx;
				font-family: PingFang;
				line-height: 30rpx;
				color: #333333;
			}

			.text_4 {
				margin-left: 30rpx;
				color: #ff3733;
				line-height: 25rpx;
			}
		}

		.group {
			padding: 0rpx 0 56rpx;
			overflow-y: auto;

			.group_2 {
				padding: 0 30rpx;

				.section_3 {
					background-color: #1ebdff;
					background-image: linear-gradient(0deg, #1ebdff 0%, #6ed5ff 100%);
					border-radius: 4rpx;
					width: 8rpx;
					height: 24rpx;
				}

				.text_4 {
					color: #333333;
					font-size: 32rpx;
					font-family: PingFangSC;
					line-height: 31rpx;
				}
			}

			.section_4 {
				padding: 38rpx 31rpx;
				background-color: #ffffff;

				.text_5 {
					line-height: 27rpx;
				}

				.text5 {
					font-size: 25rpx;
					font-family: PingFang;
					line-height: 26rpx;
					color: #54bc6e;
				}

				.section_5 {
					// padding: 34rpx 0;
					// background-color: #fbfaf8;
					border-radius: 10rpx;
					width: 150rpx;
					height: 150rpx;
					// border: dashed 2rpx #d0d0d0;

					.image_6 {
						width: 48rpx;
						height: 43rpx;
					}

					.text_6 {
						color: #999999;
						font-size: 22rpx;
						font-family: PingFangHeiTC;
						line-height: 21rpx;
					}
				}
			}

			.section_6 {
				padding: 39rpx 27rpx 39rpx 31rpx;
				background-color: #ffffff;
			}

			.section6 {
				padding: 30rpx 0rpx;
				width: 100%;
			}

			.del {
				position: absolute;
				top: 30rpx;
				right: 0rpx;
				width: 40rpx;
				height: 40rpx;
			}

			.font_2 {
				font-size: 28rpx;
				font-family: PingFang;
				line-height: 26rpx;
				color: #333333;
			}

			.section_7 {
				padding: 39rpx 30rpx;
				background-color: #ffffff;

				.text_7 {
					color: #111;
					font-size: 28rpx;
					font-family: PingFangHeiTC;
					line-height: 30rpx;
				}

				.image_7 {
					width: 9rpx;
					height: 18rpx;
				}
			}

			.section_8 {
				padding: 38rpx 29rpx 38rpx 32rpx;
				background-color: #ffffff;

				.text_8 {
					line-height: 30rpx;
				}
			}

			.font_3 {
				font-size: 28rpx;
				font-family: PingFang;
				line-height: 26rpx;
				color: #111;
				text-align: right;
			}

			.font3 {
				width: 100%;
				background-color: #f8f8f8;
				border-radius: 10rpx;
				padding: 15rpx;
			}

			.section_9 {
				padding: 34rpx 32rpx;
				background-color: #ffffff;

				.text_9 {
					line-height: 27rpx;
				}

				.group_3 {
					margin-right: 3rpx;

					.image_8 {
						width: 26rpx;
						height: 36rpx;
					}
				}
			}

			.section_10 {
				padding: 0 30rpx 2rpx;
				background-color: #ffffff;

				.divider {
					background-color: #f6f6f6;
					height: 2rpx;
				}

				.text_10 {
					width: 650rpx;
					color: #111;
					font-size: 28rpx;
					font-family: PingFang SC;
					line-height: 27rpx;
					background-color: #f8f8f8;
					margin-bottom: 20rpx;
					padding: 20rpx;
				}
			}

			.group_4 {
				padding: 0 60rpx;

				.group_5 {
					padding-left: 18rpx;
					padding-bottom: 26rpx;

					.group_6 {
						border-radius: 10rpx;
						width: 26rpx;
						height: 26rpx;
						// border: solid 2rpx #dbdbdb;
					}

					.group_7 {
						line-height: 23rpx;
						height: 23rpx;

						.font_4 {
							font-size: 25rpx;
							font-family: PingFang SC;
							line-height: 23rpx;
						}

						.text_12 {
							color: #999999;
						}

						.text_13 {
							color: #54bc6e;
						}
					}
				}

				.button {
					padding: 36rpx 0;
					background-color: #54bc6e;
					border-radius: 24rpx;

					.text_14 {
						color: #ffffff;
						font-size: 32rpx;
						font-family: PingFang;
						line-height: 31rpx;
					}
				}
			}
		}
	}

	.title {
		width: 100%;
		height: 90rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin-top: 19rpx;
	}

	.popup {
		width: 750rpx;
		display: flex;
		align-items: center;
		flex-direction: column;
		margin: 10rpx 0;
		max-height: 600rpx;
		overflow-y: auto;
	}

	.popup-item {
		width: 90%;
		height: 105rpx;
		border-bottom: 2rpx solid #F6F6F6;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.popup-item:nth-last-child(1) {
		border-bottom: 0;
	}

	.popup-item-num {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
	}

	.popup-item-click {
		width: 32rpx;
		height: 32rpx;
		/* border: 2rpx solid #B5B5B5; */
		border-radius: 17rpx;

		>image {
			width: 33rpx;
			height: 33rpx;
		}
	}

	.active {
		border: 0;
	}

	.btn {
		width: 630rpx;
		height: 104rpx;
		background-color: #54bc6e;
		border-radius: 24rpx;
		margin: 30rpx auto;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>